<template>
  <div class="userinfo_frame">
    <!-- 头像-->
    <el-row style="margin-bottom: 5%"
      ><el-col :span="2" :offset="10">
        <el-avatar
          :size="80"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar></el-col
    ></el-row>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-descriptions class="margin-top" :column="3" :size="'mini'" border>
          <el-descriptions-item label="用户名">{{
            user.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号"
            >13873025721</el-descriptions-item
          >
          <el-descriptions-item label="性别">男</el-descriptions-item>
          <el-descriptions-item label="地址">xxxx</el-descriptions-item>
        </el-descriptions>
      </el-col></el-row
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "UserInfo",
  data() {
    return {};
  },
  computed: {
    ...mapState("userAbout", ["user"]),
  },
};
</script>

<style lang="less">
.userinfo_frame {
  float: left;
  width: 89%;
  height: 100%;
}
</style>